<template>
  <div class="body">
    <div class="titel">
      <div class="zuo">
        <van-tabs  v-model="active" >
          <van-tab title="热门播客">
           <HotPodcast_1/>
          </van-tab>
         
          <van-tab title="有声书">
            <HotPodcast_2/>
          </van-tab>
        </van-tabs>
         
        <!-- <span class="response1" id="rmbk" >热门播客</span>
        <div class="zj">|</div>
        <span class="response2" id="yss">有声书</span> -->
      </div>
     
    </div>
    
  </div>
</template>
<script>
import HotPodcast_1 from '../home/HotPodcast_1.vue'
import HotPodcast_2 from '../home/HotPodcast_2.vue'
export default {
  name: 'HotPodcast',
  components: {
    HotPodcast_1,
    HotPodcast_2
  },
  // created() {
  //   this.getData();
  // },
  // data() {
   
  //   return {
  //     recommendedlist: [],
  //   };
    
  // },
  // methods: {
  //   hotbk() {},
  //   getData() {
  //     this.$request("get", "/personalized?limit=3").then((res) => {
  //       console.log(res);
  //       this.recommendedlist = res.result;
    
  //     });
  //   },
  // },
};
</script>
<style scoped>
.response1{
  font-size: 26px;
}
.response2{
  margin: auto;
  font-size: 22px;
  color: rgba(0, 0, 0, 0.43);
}
.zuo {
  float: left;
  margin-left: 25px;
  display: inline-flex; 
}
.zj {
  margin: auto;
  font-size: 30px;
  margin-left: 5px;
  margin-right: 5px;
}
ul.content li {
  margin-left: 2rem;
  margin-top: 1rem;
}

.image {
  width: 20%;
  height: 20%;
}
.titel {
  padding-bottom: 2rem;
}
.gd {
  width: 100%;
}
.liii {
  display: flex;
}
.wzzzz {
  display: block;
}

.wz1 {
  margin-top: 2rem;
}
.span1 {
  font-size: 0.5rem;
  margin-left: 2rem;
}
.wz2 {
  text-align: center;
  margin-top: 5rem;
}
</style>
